<template>
  <div id='ntfc'>
    <h3>Maintenance and Outage Notifications</h3>
    <div class="swth">
      <span class="swth-desc">Send E-mails for Outage and Maintenance</span>
      <a-switch checkedChildren="开" unCheckedChildren="关" />
    </div>
    <h3>Bandwidth Preferences</h3>
    <div class="swth">
      <span class="swth-desc">Send E-mails on Bandwidth Usage</span>
      <a-switch checkedChildren="开" unCheckedChildren="关" defaultChecked />
    </div>
    <div class="swth">
      <span class="swth-desc">Stop Servers on Bandwidth Usage</span>
      <a-switch checkedChildren="开" unCheckedChildren="关" />
    </div>
  </div>
</template>


<style>
  #ntfc {
    padding: 0;
    margin: 0;
  }
  #ntfc h3 {
    margin: 20px 0 0 0;
    padding: 0 50px;
    font-size: 20px;
  }
  #ntfc .swth {
    margin: 20px 0 0 0;
    padding: 0 60px;
    font-size: 16px;
    width: 800px;
  }
  #ntfc .swth-desc {
    margin: 0 20px 20px 0;
  }
</style>